<template>
  <div>
    <h1>添加商品</h1>
    <el-row>
      <el-col :span="6">
        <el-form>
          <el-form-item label="商品名" label-width="80px">
            <el-input v-model="name" placeholder="请输入商品名"></el-input>
          </el-form-item>
          <el-form-item label="价格" label-width="80px">
            <el-input v-model="price" placeholder="请输入商品价格"></el-input>
          </el-form-item>
          <el-form-item label="图片" label-width="80px">
              <input type="file" id="pic">
          </el-form-item>
          <el-form-item label="简介" label-width="80px">
            <el-input v-model="desc" placeholder="请输入简介"></el-input>
          </el-form-item>
          <el-form-item label="商品名" label-width="80px">
            <textarea v-model="content"></textarea>
          </el-form-item>
          <el-form-item label="库存" label-width="80px">
            <el-input v-model="store" placeholder="请输入库存"></el-input>
          </el-form-item>
          <el-form-item label="单位" label-width="80px">
            <el-input v-model="unit" placeholder="请输入单位"></el-input>
          </el-form-item>
          <el-form-item label="分类" label-width="80px">
            <select v-model="cate">
              <option v-for="cates in cate_list" :key="cates.id" :value="cates.id">{{cates.name}}</option>
            </select>
          </el-form-item>
          <el-form-item label="">
                  <el-button type="primary" @click="add">立即添加</el-button>
                  <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  data() {
    return {
      name:"新西兰大虾",
      cate_list:[],
      price:"333",
      desc:"新西兰产的大虾，好吃又好玩",
      content:"新西兰产的大虾，好吃又好玩",
      store:"100",
      unit:"500g",
      cate:"",
    };
  },
  methods: {
    add(){

        const fdata=new FormData()
        fdata.append("name",this.name)
         fdata.append("price",this.price)
          fdata.append("desc",this.desc)
           fdata.append("content",this.content)
            fdata.append("store",this.store)
             fdata.append("unit",this.unit)
              fdata.append("cate",this.cate)
        fdata.append("pic",document.getElementById("pic").files[0])

        axios.post("http://127.0.0.1:8000/good/",fdata).then(resp=>{
          console.log(resp.data)
          alert(resp.data.msg)
        }).catch(error=>{
          console.log(error)
        })
    }
  },
  created() {

      
        axios.get("http://127.0.0.1:8000/cate/").then(resp=>{
          console.log(resp.data)
          this.cate_list=resp.data
        }).catch(error=>{
          console.log(error)
        })
  },
};
</script>cate

<style>
</style>